<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @touchstart.stop @click="handleHistory">
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">积分充值</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <div class="ui-mode-content flex1" ref="scroll">
            <template v-if="pageStatus">
                <div class="mt-flex-inner">
                    <div class="mt-recharge-info">
                        <div class="nick-name">用户名：<em>{{public_user_info.nick_name}}</em></div>
                        <div class="score-info">积分：<span></span>
                            <div class="consume-left">余额：
                                <span id="consume_price_left"></span>&nbsp;元
                            </div>
                        </div>
                    </div>
                    <div class="mt-recharge-goods">
                        <p class="title">选择充值额度<span>{{getSelectScore||'-'}}</span><em>&nbsp;元</em></p>
                        <div class="score-goods">
                            <a href="javascript:;" class="item" :class="item.isActive?'active':''"
                                @touchstart.stop @click="selectItem(i)"
                                :key="`score-${i}`"
                                v-for="(item,i) in scoreList"
                            >
                                {{item.goods_name}}
                            </a>
                        </div>
                    </div>
                    <div class="mt-recharge-pay">
                        <p class="title">选择支付方式</p>
                        <div class="mt-flex box">
                            <template v-if="isWeixin">
                                <input type="radio" value="4" class="hide"  name="pay_type" id="_weichat_pay_" >
                                <label for="_weichat_pay_" class="pay-type mt-flex-inner weichat">
                                    <img src="@/assets/images/weichat_pay_logo.png" >
                                </label>
                            </template>
                            <template>
                                <input type="radio" class="hide" checked value="3" name="pay_type" id="_alipay_">
                                <label for="_alipay_" class="pay-type mt-flex-inner alipay">
                                    <img  src="@/assets/images/alipay_logo.png">
                                </label>
                            </template>
                        </div>
                        <div id="alipy_show_text_filed"></div>
                    </div>
                </div>

            </template>
        </div>
        <div >
            <a href="javascript:;" class="gradient mt-item-button" @touchstart.stop @click="submit">去支付</a>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
export default {
    name: 'my/share',
    data(){
        return {
            public_agent_info:{},
            public_user_info:{},
            scoreList:[]
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest
    ],
    computed:{
        getSelectScore(){
            var selectItem=this.getSelectItem();
            var score='-';
            if(selectItem){
                score=selectItem.price_4_shop_retail;
            }
            return score;
        }
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init);
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        getSelectItem(){
            var selectItem = {};
            if(this.scoreList&&this.scoreList.length){
                for (let i = 0; i < this.scoreList.length; i++) {
                    if(this.scoreList[i].isActive){
                        selectItem=this.scoreList[i];
                        break;
                    }
                }
            }
            return selectItem;
        },
        // 初始化
        init(){
            this.getShopInfo().then(({result,response})=>{
                this.getPageInfo({
                    name:'category.foodNew',
                    param:{
                        invoke_method:'public_page_4m_shop_goods_list_2_reg',
                        id_public_goods_type:this.public_goods_type[0].id_public_goods_type,
                        pre_db_para_begin_idx:0,
						pre_db_para_length_4_list:10
                    }
                }).then(({result,response})=>{
                    if(result.public_goods_list&&result.public_goods_list.length){
                        result.public_goods_list.forEach(item => {
                            item.isActive=false;
                        });
                        result.public_goods_list[0].isActive=true;
                    }
                    this.scoreList=result.public_goods_list;
                });
            }).catch(({msg})=>{
                this.showResult(msg,true);
            });
        },
        // 获取用户信息
        getShopInfo(){
            return new Promise((resolve,reject)=>{
                this.$http.post({
                    name:'common.shop.info',
                    data:{
                        invoke_method:'user_and_shop_info',
                        ship_state: 132
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    this.public_agent_info=result.public_agent_info||{};
                    this.public_user_info=result.public_user_info||{};
                    this.public_goods_order_record=result.public_goods_order_record||{};
                    this.setState({
                        key:'public_agent_info',
                        value:this.public_agent_info
                    });
                    this.setState({
                        key:'public_user_info',
                        value:this.public_user_info
                    });
                    this.$http.post({
                        name:'my.structure',
                        data:{
                            invoke_method:'show_goods_structure',
                            child_name:'积分',
                            filter_type:5
                        },
                        loading:{
                            enabled:false
                        }
                    }).then(({result,response})=>{
                        if (result.public_goods_type == null || result.public_goods_type.length == 0){
                            this.showMessage('未配置充值数据');
                            return;
                        }else{
                            this.public_goods_type=result.public_goods_type;
                        }
                        resolve({result,response});
                    }).catch(({msg})=>{
                        reject({msg});
                    });
                }).catch(({msg})=>{
                    reject({msg});
                });
            });
        },
        selectItem(i){
            if(this.scoreList[i].isActive){
                return
            }
            for (let i = 0; i < this.scoreList.length; i++) {
                this.scoreList[i].isActive=false
            }
            this.scoreList[i].isActive=true;
        },
        submit() {
            var selectItem=this.getSelectItem();

            console.log(!selectItem || Object.keys(selectItem).length === 0)
            if(!selectItem || Object.keys(selectItem).length === 0){
                this.showToast('请选择充值额度',false);
                return;
            }

            // 账号密码登录
            if(!this.sending){
                this.sending=true;
                this.loading=this.$$loading();
                this.$http.post({
                    name:'common.shopping.clear',
                    data:{
                        invoke_method:'clear_order_details',
                        id_public_goods_order_record:this.public_goods_order_record.id_public_goods_order_record
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    this.$http.post({
                        name:'common.shopping.modify.input',
                        data:{
                            invoke_method:'num_change_order_details',
                            id_public_goods_order_record:this.public_goods_order_record.id_public_goods_order_record,
                            pre_cmd_para_order_detail_change_data:selectItem.id_public_goods_info+'-_-'+1,
                        },
                        loading:{
                            enabled:false
                        }
                    }).then(({result,response})=>{
                        this.$http.post({
                            name:'common.shopping.info',
                            data:{
                                invoke_method:'pre_submit_4_order',
                                pre_db_para_id_public_goods_order_record:this.public_goods_order_record.id_public_goods_order_record,
                                ways_of_payment: 3111
                            },
                            loading:{
                                enabled:false
                            }
                        }).then(({result,response})=>{
                            this.loading&&this.loading.close();
                            this.sending=false;
                            this.$router.push({
                                path:'/category/alipay',
                                query:{
                                    price:this.getSelectScore,
                                    orderId:this.public_goods_order_record.id_public_goods_order_record
                                }
                            });
                        }).catch(({msg})=>{
                            this.sending=false;
                            this.showMessage(msg);
                            this.loading&&this.loading.close();
                        });
                    }).catch(({msg})=>{
                        this.sending=false;
                        this.showMessage(msg);
                        this.loading&&this.loading.close();
                    });
                }).catch(({msg})=>{
                    this.sending=false;
                    this.showMessage(msg);
                    this.loading&&this.loading.close();
                });
            }
		},
        /*
         * 请求失败刷新
         */
        handleRefresh(){
            this.init();
        }
    },
    components:{
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.ui-mode-container {
    background: #f0f2f8;
    em, i {
        font-style: normal;
    }
}
.mt-recharge-info {
    padding: 1.15rem 1.65rem;
    font-size: 0.906rem;
    color: #666;
    .nick-name {
        border-bottom: 1px solid #ddd;
        height: 3.7rem;
        line-height: 3.7rem;
        padding-left: 2.56rem;
        position: relative;
        white-space: nowrap;
        &::before {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            width: 2.56rem;
            height: 100%;
            background-image:url(~@/assets/images/recharge_user_avatar.png);
            background-size: 1.76rem 1.867rem;
            background-position: left center;
            background-repeat:no-repeat;
        }
    }
    .score-info{
        height: 3.7rem;
        line-height: 3.7rem;
        padding-left: 2.56rem;
        position: relative;
        white-space: nowrap;
        &::before {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            width: 2.56rem;
            height: 100%;
            background-image:url(~@/assets/images/user_score_left.png);
            background-size: 1.76rem 1.867rem;
            background-position: left center;
            background-repeat:no-repeat;
        }
        .score_price_left{
            color: #2398aa;
        }
    }
    .consume-left {
        width: 55%;
        box-sizing: border-box;
        float: right;
        height: 3.7rem;
        line-height: 3.7rem;
        padding-left: 2.56rem;
        position: relative;
        white-space: nowrap;
        &::before {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            width: 2.56rem;
            height: 100%;
            background-image:url(~@/assets/images/user_consume_left.png);
            background-size: 1.76rem 1.867rem;
            background-position: left center;
            background-repeat:no-repeat;
        }
    }
}
.mt-recharge-goods{
    .title {
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 0.906rem;
        color: #666;
        background: #f0f2f8;
        border-top: 2px solid #babcc1;
        border-bottom: 1px solid #ddd;
        padding-left: 1.76rem;
        span {
            display: inline-block;
            margin-left: 1rem;
            color: #2398aa;
        }
    }
    .score-goods {
        padding: 0.5rem 0.5rem 0.5rem 2.9rem;
        &::after {
            content: "";
            display: block;
            clear: both;
        }
        .item {
            width: 3.94rem;
            height: 1.92rem;
            line-height: 1.92rem;
            border: 1px solid #ddd;
            border-radius: 0.2rem;
            margin: 0.45rem 0.4rem;
            float: left;
            white-space: nowrap;
            font-size: 0.906rem;
            color: #999;
            text-align: center;
            &.active {
                border-color: #d1200e;
                color: #d1200e;
            }
        }
    }
}
.mt-recharge-pay{
    .title {
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 0.906rem;
        color: #666;
        background: #f0f2f8;
        border-top: 2px solid #babcc1;
        border-bottom: 1px solid #ddd;
        padding-left: 1.76rem;
    }
    .box {
        margin: 1rem  0 0.5rem 1.65rem;
    }
    label {
        padding-left: 1.97rem;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -0.6rem;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            z-index: 1;
            box-sizing: border-box;
            border: solid 0.1rem #c5c5c5;
        }
    }
    input:checked+label:before {
        border-color: #2398aa;
    }
    input:checked+label:after {
        content: '';
        position: absolute;
        left: 0.2rem;
        top: 50%;
        margin-top: -0.4rem;
        width: 0.6rem;
        height: 0.6rem;
        z-index: 10;
        border-radius: 50%;
        background: #2398aa;
    }
    .weichat img {
        width: 6.1rem;
        height: 1.65rem;
    }
    .alipay img {
        width: 4.62rem;
        height: 1.65rem;
    }
}
.mt-item-button {
    margin:.5rem;
    position: relative;
    display: block;
    opacity: 0.9;
    border-radius: 0.2rem;
    height: 2.2rem;
    line-height: 2.2rem;
    font-size: 0.8rem;
    color: #fff;
    cursor: pointer;
    text-align: center;
}
</style>
